<template>

  <van-tabs v-model:active="activeWeekdayIndex" color="#ff0000" :sticky="true" :swipe-threshold="7" :animated="true"
    @click-tab="handleTabClick">
    <van-tab :title="day" v-for="(day, index) in weekdays" :key="index">


      <!-- 这里是列表  -->
      <van-list class="update-list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ul class="list">
          <li v-for="item in list" :key="item.id" :id="item.id">
            <div class="img-thumbUp" @click="gotoDetail(item.id)">
              <img :src="getProxyImageUrl(item.bigpic)" :alt="item.title" class="h-img" />
              <span class="thumbUp">
                <van-tag round>{{ item.num_love }} <van-icon name="good-job-o" class="tag-item" /></van-tag>

              </span>
            </div>

            <div class=" title-tag-view-all">
              <span class="title line-ellipsis" @click="gotoDetail(item.id)">{{ item.title }}</span>
              <span class="tag line-ellipsis">


                <van-tag round v-for="(tag, index) in formatTag(item.tag)" :key="index">{{
                  tag
                  }}</van-tag>

              </span>
              <span class="view-all" @click="gotoCover(item.id)" :id="item.id">查看全集<van-icon name="arrow"
                  size="14" /></span>
            </div>
            <p class="lastChapter line-ellipsis">更新至{{ item.lastchapter }}</p>


          </li>
        </ul>
      </van-list>





    </van-tab>
  </van-tabs>



  <tab-bar />




</template>




<script setup>
import { getProxyImageUrl } from "@/util/index.js"
import TabBar from "@/components/common/TabBar.vue"
import { getDailyUpdate } from "@/api/index.js";
import { ref, computed, onMounted, watch } from "vue";

import { useRouter } from "vue-router";
const router = useRouter();


const activeWeekdayIndex = ref(6);

const list = ref([]);
const loading = ref(false);
const finished = ref(false);


function formatTag (str) {
  return str.trim().split(/\s+/);
}

const weekdays = computed(() => {
  const daysOfWeek = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
  const today = new Date();
  const dates = [];
  for (let i = 6; i >= 0; i--) {
    const date = new Date(today);
    date.setDate(today.getDate() - i);
    const dayOfWeek = date.getDay();
    let dayLabel = daysOfWeek[dayOfWeek];
    if (i === 0) {
      dayLabel = "今天";
    } else if (i === 1) {
      dayLabel = "昨天";
    }
    dates.push(dayLabel);
  }
  return dates;
});

const activeWeekdayId = computed(() => {
  // 周几      今天 id= 0 昨天id=1 前天id= 2 以此类推
  // tabs 索引 今天 6     昨天5    前天4     以此类推
  //    activeWeekdayIndex + 当前周几对应的ID = 6
  return 6 - activeWeekdayIndex.value

})

const pageNum = ref(1);



const handleTabClick = ({ name }) => {
  activeWeekdayIndex.value = name;

  // console.log("点击了", name);

};


onMounted(async () => {

  loading.value = true;
  pageNum.value = 1;
  const res = await getDailyUpdate(activeWeekdayId.value, pageNum.value)

  list.value.push(...res.data);

  loading.value = false;

  // console.log("res", res);


})


const onLoad = async () => {
  pageNum.value += 1;
  loading.value = true;
  const res = await getDailyUpdate(activeWeekdayId.value, pageNum.value)

  if (res.data.length === 0) {
    loading.value = false;
    finished.value = true;
    return;
  } else if (res.data.length > 0) {
    list.value.push(...res.data);
    loading.value = false;
  }

}



watch(activeWeekdayIndex, async () => {

  pageNum.value = 1;
  list.value = [];
  loading.value = true;
  const res = await getDailyUpdate(activeWeekdayId.value, pageNum.value)
  list.value.push(...res.data);
  loading.value = false;

});


// 进入漫画详情页
const gotoDetail = (comicId) => {
  // 传递漫画ID到漫画详情页
  // console.log("gotoDetail", comicId);
  router.push({ name: "ComicDetail", params: { id: comicId } });
};


const gotoCover = (comicId) => {
  router.push({ name: "ComicCover", params: { id: comicId } });
};


</script>



<style scoped>
.line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}


.update-list {
  /* margin-top: 10px; */
}


.list {
  list-style: none;
  padding: 10px;
  margin: 0;
}

.list li {
  box-sizing: border-box;
  text-align: left;
  background-color: #fff;
  padding: 0px;
}

.img-thumbUp {
  width: 100%;
  /* height: 200px; */
  position: relative;
}


.thumbUp {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgb(128, 128, 128);
  background: transparent;
  /* 灰色透明背景 */
  padding: 4px 8px;
  /* 内边距 */
  border-radius: 4px;
  /* 圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
}


:deep(.van-icon-good-job-o) {
  margin-left: 4px;
}



.h-img {
  border-radius: 5px;
  object-fit: cover;
  ;
  /* 裁剪图片以填充容器 */
  width: 100%;
  /* 图片宽度占满父容器 */
  height: 200px;
  /* 保持图片的宽高比例 */
  display: block;
  /* 去除图片底部的默认空白间隙 */
}



.title-tag-view-all {

  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}



.title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  margin-right: 10px;
}

.tag {
  font-size: 12px;
}


:deep(.tag-item) {

  background-color: transparent;
  /* 确保内部标签背景透明 */
  color: #fff;
  /* 文字颜色为白色 */
  /* background-color: rgba(128, 128, 128, 0.6); */

}


.view-all {
  font-size: 12px;
  margin-left: auto;
  color: #666;
}


.lastChapter {
  font-size: 12px;
  color: #666;
  margin-top: 10px;
}
</style>
